<template>
  <div class="code-contail">
    <van-nav-bar class="code-header van-nav-bar_none van-nav-bar_line"
                 title="开门"
                 @click-left="goBack(-1);">
      <template slot="left">
        <van-icon name="arrow-left"></van-icon>
      </template>
      <template slot="right">
        <van-icon name="sangedian"
                  @click.stop="menu"
                  style="margin-top:-15px;" />

      </template>

    </van-nav-bar>
    <div class="code-wepper">
      <div class="code-wepper-header">
        <div class="title">
          <van-icon name="dingwei"></van-icon>
          <span v-text="userInfo.communityName"></span>
        </div>
        <div class="menu"
             @click="codeListBox=true">
          <van-icon class="open"
                    name="pending-orders" />
        </div>
      </div>
      <div class="code-wepper-body">
        <template v-if="codeImg">
          <img :src="codeImg"
               v-for="(item,index) in 4"
               class="img"
               :key="index"
               alt="二维码"
               @click.stop="getCode" />
        </template>
        <span v-else
              class="avue-tip">没有找到相关二维码</span>
      </div>
    </div>
    <div class="code-footer">
      <div class="code-list">
        <p class="name">
          <van-icon name="tixing"></van-icon>提示
        </p>
        <div class="list">
          <div class="item">请将手机距离二维码30cm左右;</div>
          <div class="item">二维码一分钟自动更新，也可进行手动更新;</div>
          <div class="item">点击右上角按钮可以授权分享好友;</div>
        </div>
      </div>
    </div>
    <share-menu ref="share"
                v-model="menuShow"
                @message="message"
                @wechat="wechat"></share-menu>
    <el-dialog title="远程开门"
               :visible.sync="codeListBox"
               width="80%"
               :close-on-click-modal="false">
      <el-tree :data="codeList"
               :props="codeListProps"
               @node-click="codeListNodeClick"></el-tree>
    </el-dialog>
    <el-dialog title="分享"
               modal-append-to-body
               append-to-body
               :visible.sync="shareShow"
               width="80%">
      <el-form :model="shareForm"
               :rules="shareRules"
               ref="shareForm"
               label-width="1.8rem">
        <el-form-item label="姓名"
                      prop="userName">
          <el-input v-model="shareForm.userName"
                    size="small"
                    placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号"
                      prop="phone">
          <el-input v-model="shareForm.phone"
                    size="small"
                    placeholder="请输入手机号"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="success"
                   @click="shareSubmit">分享</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getCode, queryCode, shareMsg, getCodeList, openCodeList } from '@/api/user';
import baseCommon from '@/mixins/common.js';
import shareMenu from '@/components/share/main';
import { queryWuye } from '@/api/pay';

export default {
  name: 'code',
  mixins: [baseCommon()],
  components: {
    shareMenu,
  },
  data() {
    return {
      codeListBox: false,
      codeList: [],
      codeListProps: {
        children: 'children',
        label: 'name',
        value: 'deviceId',
      },
      codeImg: '',
      checkCode: '',
      refreshCode: '',
      qrId: '',
      shareShow: false,
      shareRules: {
        userName: [
          { required: true, message: '请输入姓名', trigger: 'change' },
          { min: 2, message: '姓名长度不对', trigger: 'change' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { min: 11, max: 11, message: '手机号长度不对', trigger: 'change' },
        ],
      },
      shareForm: {
        userName: '',
        phone: '',
      },
      menuShow: false,
      menuType: 0,
    };
  },
  created() {
    queryWuye(this.userInfo.houseId).then((res) => {
      const data = res.data;
      const success = data.success;
      if (!success) {
        this.$confirm('物业费有欠款，请支付物业费', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$router.push({ path: '/pay', query: { type: 0 } });
        });
      }
    });
    this.getCode();
    this.getCodeList();
  },
  computed: {
    ...mapGetters(['minHeight', 'userInfo', 'localCode', 'community']),
  },
  methods: {
    // 菜单
    menu() {
      this.menuShow = true;
    },
    codeListNodeClick(data) {
      if (data.children.length === 0) {
        this.$dialog
          .confirm({
            title: '提示',
            message: `是否远程开${data.name}的门`,
          })
          .then(() => openCodeList(data)).then(() => {
            this.$router.replace({ path: '/code/success', query: { message: '开门成功', result: true } });
          }).catch(() => {

          });
      }
    },
    getCodeList() {
      getCodeList(this.community.communityId).then((res) => {
        const data = res.data.data;
        this.codeList = data;
      });
    },
    shareReset() {
      this.shareShow = false;
      this.shareForm = {
        userName: '',
        phone: '',
      };
      this.$refs.shareForm.resetFields();
    },
    shareSubmit() {
      this.$refs.shareForm.validate((valid) => {
        if (valid) {
          shareMsg(this.shareForm.userName, this.shareForm.phone, this.menuType)
            .then((res) => {
              const data = res.data.data;
              this.shareReset();
              if (this.menuType === 0) {
                this.$message.success({
                  message: '分享成功',
                  duration: 1500,
                });
              } else if (this.menuType === 1) {
                return this.$refs.share.wechatShare({
                  title: '开锁二维码',
                  href: data,
                  description: '用于开锁的二维码',
                });
              }
            })
            .then(() => {
              this.$message.success({
                message: '分享成功',
                duration: 1500,
              });
            });
        }
      });
    },
    // 打开分享
    open() {
      this.shareShow = true;
      this.menuShow = false;
    },
    // 短信分享
    message() {
      this.menuType = 0;
      this.open();
    },
    // 微信分享
    wechat(url) {
      this.menuType = 1;
      this.open();
    },
    getCode() {
      clearInterval(this.checkCode);
      clearInterval(this.refreshCode);
      getCode(this.community.communityId).then((res) => {
        const data = res.data.data;
        const resource = data.resource;
        this.codeImg = resource ? `data:image/jpeg;base64,${resource}` : '';
        if (data) {
          this.qrId = data.qrId;
          this.whileCode();
          this.queryCode();
        }
      });
    },
    // 验证码一分钟更新
    whileCode() {
      this.refreshCode = setInterval(() => {
        this.clearCode();
      }, 60000);
    },
    // 清除验证码
    clearCode() {
      clearInterval(this.checkCode);
      this.getCode();
    },
    // 验证码轮询
    queryCode() {
      this.checkCode = setInterval(() => {
        queryCode(this.qrId).then((res) => {
          const data = res.data.data;
          const status = data.status;
          if (status === '200') {
            clearInterval(this.checkCode);
            this.$router.replace({ path: '/code/success', query: { message: '开门成功', result: true } });
          } else if (status === '403') {
            clearInterval(this.checkCode);
            this.$router.replace({ path: '/code/success', query: { message: '开门失败,无相关权限', result: false } });
          } else if (status === '300') {
            clearInterval(this.checkCode);
            this.$router.replace({ path: '/code/success', query: { message: '开门失败,二维码已过期', result: false } });
          }
        });
      }, 2000);
    },
  },
  beforeDestroy() {
    clearInterval(this.checkCode);
    clearInterval(this.refreshCode);
  },
};
</script>

<style lang="scss">
.code-contail {
  height: 100%;
  overflow: hidden;
  background-color: #58c474;
  .avue-tip {
    padding: 90px 0;
  }
}
.code-header {
  background-color: #58c474 !important;
  .van-icon,
  .van-nav-bar__title {
    color: #fff !important;
  }
}
.code-wepper-header {
  position: relative;
  height: 42px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #eee;
  line-height: 42px;
  display: flex;
  align-items: center;
  .open {
    font-size: 16px;
    color: #999;
    margin-left: 10px;
  }
  .list {
    font-size: 14px;
    padding: 0 10px;
    color: #999;
  }
  .menu {
    position: absolute;
    top: 0;
    right: 16px;
    color: #b3b3b3;
    span {
      margin-right: 6px;
      font-size: 14px;
    }
    i {
      font-size: 16px;
    }
  }
}
.code-title {
  color: #fff;
  font-size: 16px;
  text-align: center;
  i {
    margin-right: 6px;
  }
}
.code-wepper {
  padding: 0 38px;
  padding-top: 30px;
  margin-bottom: 32px;
  width: 100%;
  box-sizing: border-box;
}
.code-wepper-header {
  position: relative;
  height: 42px;
  background-color: rgba(248, 248, 248, 1);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  line-height: 42px;
  display: flex;
  align-items: center;
  .title {
    font-size: 12px;
    padding: 0 10px;
    color: #58c474;
  }
  .menu {
    position: absolute;
    top: 0;
    right: 16px;
    color: #b3b3b3;
    span {
      margin-right: 6px;
      font-size: 14px;
    }
    i {
      font-size: 16px;
    }
  }
}
.code-wepper-body {
  padding: 20px 20px 30px 20px;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .img {
    $height: 128px;
    display: block;
    width: $height;
    height: $height;
    margin: 0 auto;
    background-color: #eee;
  }
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.code-wepper-footer {
  height: 47px;
  background-color: #fff;
  border-top: 1px solid #eee;
  color: #999;
  font-size: 14px;
  line-height: 47px;
  text-align: center;
}
.code-list {
  padding: 0 38px;
  color: #fff;
  .name {
    line-height: 30px;
    i {
      margin-right: 7px;
      font-size: 16px !important;
    }
  }
  .list {
    font-size: 12px;
    .item {
      padding-left: 21px;
      position: relative;
      line-height: 20px;
      &::before {
        content: "●";
        font-size: 8px;
        transform: scale(0.6);
        width: 16px;
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>

